var config = {

                cladeColor: { value: undefined,
                              string: 'Tree Color',
                              onchange: treeColorOnChange },

                buttonColor: { value: undefined,
                               string: 'Button Color',
                               onchange: buttonColorOnChange },
    
                buttonRadius: { value: undefined,
                                string: 'Button Radius',
                                onchange: buttonRadiusOnChange },

                labelColor: { value: undefined,
                              string: 'Label Color',
                              onchange: labelColorOnChange },

                fontFamily: { value: undefined,
                              string: 'Font Family',
                              onchange: labelFontOnChange },

                fontSize: { value: undefined,
                            string: 'Font Size',
                            onchange: labelSizeOnChange },

                labelBuffer: { value: undefined,
                               string: 'Label Buffer Length',
                               onchange: redrawCladogram },

                nodeSeparation: { value: undefined,
                                  string: 'Vertical Tip Separation',
                                  onchange: redrawCladogram },

                generationSeparation: { value: undefined,
                                        string: 'Horizontal Node Separation',
                                        onchange: redrawCladogram },

                canvasBuffer: { value: undefined,
                                string: 'Canvas Border Buffer Length',
                                onchange: redrawCladogram },

                pathWidth: { value: undefined,
                             string: 'Tree Path Width',
                             onchange: treePathWidthOnChange },

                maxTips: { value: undefined,
                           string: 'Maximum Tips',
                           onchange: maxTipsOnChange 
                         }
             };


function treeColorOnChange( value ) {

    var localGlobal = globals;

    localGlobal.pathObjs.main.tree.attr( { stroke: value } );
    localGlobal.pathObjs.overview.tree.attr( { stroke: value } );

    if( localGlobal.supportValueInfo.threshold ) {
        localGlobal.pathObjs.main.supportValue.attr( { stroke: value } );
        localGlobal.pathObjs.overview.supportValue.attr( { stroke: value } );
    }    
}

function buttonColorOnChange( value ) { globals.cladeButton.attr( { fill: value, stroke: value } ); }

function buttonRadiusOnChange( value ) { globals.cladeButton.attr( { r: value } ); }

function labelColorOnChange( value ) { 

    var labels = globals.labelInfo.labels;

    for( var id in labels ) { labels[id].attr( { stroke: value } ); }
}

function labelFontOnChange( value ) {

    var labels = globals.labelInfo.labels;

    for( var id in labels ) { labels[id].attr( { 'font-family': value } ); }
}

function labelSizeOnChange( value ) {

    var labels = globals.labelInfo.labels;

    for( var id in labels ) { labels[id].attr( { 'font-size': value } ); }
}

function treePathWidthOnChange( value ) { globals.pathObjs.main.tree.attr( { 'stroke-width': value } ); }

function maxTipsOnChange( value ) {

    var localGlobal = globals;
    
    window.location = '/' + localGlobal.applicationName + '/default/viewer/' + localGlobal.treeId + '/' + value;
}
